<template>
  <!-- 一个.vue文件就是一个组件, 一个项目中只有一个根组件 App.vue -->
  <!-- 一个.vue文件内部一般是由三部分组成: template , script , style -->
  <!-- template 内部写标签 , 只能有一个根元素 -->
  <!-- script 内部写js逻辑 , 内部需要 export default {}, 所有的js代码都需要写在这里 -->
  <!-- style 内部写css样式 , 可以通过lang='xx'指定style内部的css语法 , 可以通过设置 scoped 属性 让多个.vue文件之间的样式互不影响 -->
  <div id="app">
    <!-- <h1>{{phone|phoneFilter}}</h1> -->

    <!-- 搜索框 -->
    <Search></Search>

    <!-- 轮播图 -->
    <Swiper></Swiper>

    <!-- 列表 -->
    <List></List>

    <!-- 下面 -->
    <Tabber></Tabber>
  </div>
</template>

<script>
// 导入组件
import Searth from "./components/Search.vue"
import Swiper from "./components/Swiper.vue"
import List from "./components/List.vue"
import Tabber from "./components/Tabber.vue"

export default {

  //负责注册组件（局部注册，只能在当前注册的文件使用）
  components:{  


    // xxx 为注册名  作为组件使用
    // 局部注册
    // "xxx":Search
    Swiper,
    List,
    Tabber



  }
      // data(){  //定义响应式数据
      //   return {
      //     // 上面只能使用return中第一级的属性
      //       title:"学习",
      //       phone:"12323424342"
      //   }

      // },
      // computed:{  //定义计算属性

      // },
      // methods:{

      // },
      // watch:{

      // },
      // filters:{  //定义过滤器  只能在当前组件中使用， 属于 局部过滤器
      //     //  phoneFilter(phone){
      //     //    return  phone.slice(0,3) +"****"+phone.slice(-4)

      //     //  }
      // }
}
</script>
<!-- scoped 让多个文件之间互不形象 -->
<style lang="scss" scoped>

</style>
